<template>
  <div>
    <el-button type="success" size="small" @click="$refs.menu.show()"
      >新增菜单</el-button
    >
    <el-table
      :data="tableData"
      row-key="menuId"
      :tree-props="{ children: 'children' }"
      v-loading="loading"
    >
      <el-table-column
        prop="menuName"
        label="菜单栏名称"
        width="250"
      ></el-table-column>
      <el-table-column prop="icon" label="图标" width="100">
        <template slot-scope="scope"
          ><i :class="'el-icon-' + scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="路径"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="$refs.menu.edit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="mini"
            :disabled="scope.row.children && scope.row.children.length > 0"
            @click="delMenu(scope.row.menuId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <menu-modal @load="getData" :menuList="tableData" ref="menu"></menu-modal>
  </div>
</template>
<script>
import { queryAllmenus, deleteMenu } from "@/api/userManagement/menu";
import menuModal from "./modules/menuModal";
import { buildtree } from "@/utils/menuFormat";
export default {
  components: {
    menuModal,
  },
  data() {
    return {
      loading: true,
      tableData: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      queryAllmenus({ mgrSn: this.$store.getters.mgrSn }).then((res) => {
        this.loading = false;
        var arr = [];
        buildtree(res.data.resultData, arr, 0);
        this.tableData = arr;
        console.log(arr);
      });
    },
    delMenu(menuId) {
      this.$confirm("此操作将删除该菜单栏, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteMenu({ menuId: menuId }).then((res) => {
            if (res.data.resultStatus) {
              this.$message.success("删除成功");
              this.getData();
            } else {
              this.$message.error(res.data.errorMessage);
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>